/***
 *  封装一个组件
 *  类组件 或者函数组件
 *  1、卡片组件  人物
 *  props 姓名  年龄  职位
 *
 *  2、可以添加适当的样式
 *
 *  3、多个人物的数组,元素是对象结构
 *     遍历并调用封装的card组件  显示整体页面效果
 */
import './App.css'
import Card from './components/Card'
import Card1 from './components/Card1'
function App() {
  let persons = [
    {
      id: 1,
      name: '张三',
      age: 18,
      job: '初级前端开发工程师'
    },
    {
      id: 2,
      name: '李四',
      age: 23,
      job: '中级前端开发工程师'
    },
    {
      id: 3,
      name: '王五',
      age: 25,
      job: '高级前端开发工程师'
    }
  ]
  return (
    <div className="main">
      {/* <Card name="张三" age={18} job="初级前端开发工程师"></Card> */}
      {persons.map((item) => (
        <Card
          name={item.name}
          age={item.age}
          job={item.job}
          key={item.id}
        ></Card>
      ))}
      <hr />
      {persons.map((item) => (
        <Card1
          name={item.name}
          age={item.age}
          job={item.job}
          key={item.id}
        ></Card1>
      ))}
    </div>
  )
}
export default App
